<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="gz.gae.blog.PhotoManager" %>
<%@ page import="gz.gae.blog.entity.Photo" %>
<%@ page import="gz.gae.blog.ioc.WebBlogUtil" %>

<head>
    <link rel="stylesheet" href="/js/TinyBox/style.css"/>

  <style type="text/css">
   #outer img{
        width:inherit;
    }
    #outer {
      background: #ffffff;
      margin: auto;
      text-align: center;
    }

    .inner {
      width: 100px;
      height: 100px;
      margin: 5px;
      border: 1px solid #000;
    }

    * html .inner {
      display: inline
    }

    /* for ie*/
    html>body #outer {
      display: table
    }

    /*for mozilla */
    html>body .inner {
      display: table;
      float: left;
    }

    .photo {
      width: 200px;
    }
  </style>
  <script type="text/javascript">
    function f(url)
    {
      var w=$(window).width();
      var h=$(window).height()-60;
      var imgInput = "<img src='" + url + "' onclick='TINY.box.hide()' height='"+h+"'>";
        TINY.box.show(imgInput, 0,0, h, 1);
        
    }
  </script>
</head>
<body>
<a href="admin/add_photo_view.action">Add photo</a>
<%
  PhotoManager photoManager = WebBlogUtil.getPhotoManager();
  List<Photo> photos = photoManager.listAll();
%>
<c:set var="photos" value="<%=photos%>"/>
<div id="outer">
  <c:forEach var="photo" items="${photos}">
    <div class="inner">
      <img class="photo" src="/file_download?fId=${photo.fileId}" onclick="f(this.src)"/>
        《${photo.name}》
      <a href="admin/delete_photo.action?pId=${photo.id}">删除</a>|
      <a href="admin/resize_photo.action?pId=${photo.id}">Resize</a>
    </div>
  </c:forEach>
</div>
</body>
